import 'package:app/jspangStudy/page/clipPath.dart';
import 'package:flutter/material.dart';
import 'dart:ui';

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: Stack(
          children: <Widget>[
            ConstrainedBox(
              // 约束盒子,添加额外约束条件确定图片的位置
              constraints: const BoxConstraints.expand(),
              child: Image.network(
                'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1602307313809&di=9b71d342c4088c883b88038d66703da1&imgtype=0&src=http%3A%2F%2Fdesk.fd.zol-img.com.cn%2Fg5%2FM00%2F02%2F0B%2FChMkJlbK0ziIVblJAAEBizvNiyoAALJjAGneagAAQGj839.jpg',
              ),
            ),
            Center(
              child: BackdropFilter(
                // 背景过滤器
                filter: ImageFilter.blur(
                  // 图片过滤器要引入dart:ui
                  sigmaX: 5.0,
                  sigmaY: 5.0,
                ),
                child: Opacity(
                  opacity: 0.5,
                  child: Container(
                    height: 700.0,
                    width: 500.0,
                    decoration: BoxDecoration(
                      // 盒子修饰器
                      color: Colors.grey,
                    ),
                    child: Center(
                      child: Text(
                        '首页',
                        style: TextStyle(color: Colors.black),
                      ),
                    ),
                  ),
                ),
              ),
            ),
            RaisedButton(
                child: Text('去看贝塞尔曲线'),
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) {
                        return ClipPathDemo();
                      },
                    ),
                  );
                }),
            Positioned(
              left: 100.0,
              top: 100.0,
              child: Tooltip(
                message: '这是一个长按的toolTip提示',
                child: Text(
                  '长按试试',
                  style: TextStyle(
                    fontSize: 16.0,
                    color: Colors.red,
                  ),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

mixin BuilderContext {}
